<!doctype html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=">
    <style type="text/css">
body {
  position: relative;
  width: 100%;
  height: 100%;
}

#box {
  position: absolute;
  width: 100px;
  height: 100px;
  border: 1px solid black;
}
    </style>
  </head>
  <body>
    <button class="foo">Button One</button>
    <button class="foo">Button Two</button>
    <button class="bar">Button Three</button>
    <script src="https://unpkg.com/rxjs@5.5.2/bundles/Rx.min.js"></script>
    <script>
const fooEventHandler = event => console.log('Foo', event);
const barEventHandler = event => console.log('Bar', event);

const click$ = Rx.Observable.fromEvent(document, 'click');
const groupByClass$ = click$.groupBy(event => event.target.className);
groupByClass$.filter(value => value.key === 'foo')
  .mergeAll()
  .subscribe(fooEventHandler);
groupByClass$.filter(value => value.key === 'bar')
  .mergeAll()
  .subscribe(barEventHandler);
    </script>
  </body>
</html>

